<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的证书 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .page-header {
            background-color: #2B7DE1;
            color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: white;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 500;
        }
        
        .page-content {
            padding-top: 60px;
            padding-bottom: 80px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: #2B7DE1;
        }
        
        .time {
            font-size: 14px;
            color: white;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
            color: white;
        }
        
        .icon {
            font-size: 14px;
        }

        .certificates-container {
            margin: 16px;
        }
        
        .info-card {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 16px;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .status-badge {
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 10px;
        }
        
        .verified {
            background-color: #E8F5E9;
            color: #34C759;
        }
        
        .pending {
            background-color: #FFF3E0;
            color: #FF9500;
        }
        
        .rejected {
            background-color: #FFEBEE;
            color: #FF3B30;
        }
        
        .upload-container {
            border: 1px dashed #ccc;
            border-radius: 6px;
            padding: 16px;
            text-align: center;
            margin-bottom: 16px;
            background-color: #f9f9f9;
            position: relative;
        }
        
        .upload-icon {
            font-size: 24px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .upload-text {
            color: #666;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .upload-tip {
            color: #999;
            font-size: 12px;
        }
        
        .certificate-preview {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 12px;
        }
        
        .certificate-info {
            margin-bottom: 16px;
        }
        
        .certificate-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .certificate-label {
            color: #999;
        }
        
        .certificate-value {
            color: #333;
            font-weight: 500;
        }
        
        .action-row {
            display: flex;
            gap: 12px;
        }
        
        .action-button {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            text-align: center;
            font-size: 14px;
            color: #666;
            background-color: white;
        }
        
        .action-button.primary {
            background-color: #2B7DE1;
            color: white;
            border: none;
        }
        
        .add-button {
            background-color: #2B7DE1;
            color: white;
            padding: 14px 20px;
            border-radius: 6px;
            text-align: center;
            margin-top: 20px;
            font-size: 15px;
        }
        
        .empty-tip {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            font-size: 15px;
            margin-bottom: 8px;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            border-color: #2B7DE1;
            outline: none;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        
        .modal-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 16px;
            text-align: center;
        }
        
        .close-button {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 20px;
            color: #999;
        }
        
        .modal-footer {
            margin-top: 24px;
            display: flex;
            gap: 12px;
        }
        
        .required::after {
            content: "*";
            color: #FF3B30;
            margin-left: 4px;
        }
        
        .message-box {
            background-color: #f8f8f8;
            border-left: 4px solid #2B7DE1;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span class="time">10:25</span>
            <div class="status-icons">
                <span class="icon">📶</span>
                <span class="icon">📡</span>
                <span class="icon">🔋</span>
            </div>
        </div>
        
        <!-- 页面头部 -->
        <header class="page-header">
            <a href="profile.html" class="back-button">←</a>
            <div class="page-title">我的证书</div>
        </header>
        
        <div class="page-content">
            <div class="certificates-container">
                <!-- 证书统计 -->
                <div class="cert-stats card">
                    <div class="stats-item">
                        <div class="stats-value">3</div>
                        <div class="stats-label">已获证书</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-value">5</div>
                        <div class="stats-label">进行中</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-value">12</div>
                        <div class="stats-label">成就徽章</div>
                    </div>
                </div>
                
                <!-- 证书分类导航 -->
                <div class="cert-nav">
                    <div class="nav-item active">全部证书</div>
                    <div class="nav-item">技能证书</div>
                    <div class="nav-item">课程证书</div>
                    <div class="nav-item">成就徽章</div>
                </div>
                
                <!-- 证书列表 -->
                <div class="certificates-list">
                    <!-- 已获得证书 -->
                    <div class="section-title">
                        <h2>已获得证书</h2>
                    </div>
                    
                    <div class="certificate-item card">
                        <div class="certificate-image">
                            <img src="images/cert-1.jpg" alt="基础护理技能证书">
                        </div>
                        <div class="certificate-info">
                            <h3>基础护理技能证书</h3>
                            <div class="certificate-meta">
                                <span class="cert-date">获得时间: 2023-05-15</span>
                                <span class="cert-valid">有效期: 2年</span>
                            </div>
                            <div class="certificate-actions">
                                <button class="btn btn-outline">查看详情</button>
                                <button class="btn btn-primary">下载证书</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="certificate-item card">
                        <div class="certificate-image">
                            <img src="images/cert-2.jpg" alt="老年人护理专项证书">
                        </div>
                        <div class="certificate-info">
                            <h3>老年人护理专项证书</h3>
                            <div class="certificate-meta">
                                <span class="cert-date">获得时间: 2023-04-20</span>
                                <span class="cert-valid">有效期: 2年</span>
                            </div>
                            <div class="certificate-actions">
                                <button class="btn btn-outline">查看详情</button>
                                <button class="btn btn-primary">下载证书</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="certificate-item card">
                        <div class="certificate-image">
                            <img src="images/cert-3.jpg" alt="急救技能证书">
                        </div>
                        <div class="certificate-info">
                            <h3>急救技能证书</h3>
                            <div class="certificate-meta">
                                <span class="cert-date">获得时间: 2023-03-10</span>
                                <span class="cert-valid">有效期: 2年</span>
                            </div>
                            <div class="certificate-actions">
                                <button class="btn btn-outline">查看详情</button>
                                <button class="btn btn-primary">下载证书</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 进行中证书 -->
                    <div class="section-title">
                        <h2>进行中证书</h2>
                    </div>
                    
                    <div class="certificate-item in-progress card">
                        <div class="certificate-image">
                            <img src="images/cert-4.jpg" alt="康复护理技能证书">
                            <div class="progress-overlay">
                                <div class="progress-circle">
                                    <svg viewBox="0 0 36 36">
                                        <path class="circle-bg"
                                            d="M18 2.0845
                                            a 15.9155 15.9155 0 0 1 0 31.831
                                            a 15.9155 15.9155 0 0 1 0 -31.831"
                                        />
                                        <path class="circle"
                                            stroke-dasharray="75, 100"
                                            d="M18 2.0845
                                            a 15.9155 15.9155 0 0 1 0 31.831
                                            a 15.9155 15.9155 0 0 1 0 -31.831"
                                        />
                                        <text x="18" y="20.35" class="percentage">75%</text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="certificate-info">
                            <h3>康复护理技能证书</h3>
                            <div class="certificate-progress">
                                <div class="progress-text">
                                    <span>完成进度</span>
                                    <span>75%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 75%;"></div>
                                </div>
                            </div>
                            <div class="certificate-meta">
                                <span class="cert-remain">剩余课程: 2门</span>
                                <span class="cert-exam">考试状态: 未通过</span>
                            </div>
                            <div class="certificate-actions">
                                <button class="btn btn-primary">继续学习</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="certificate-item in-progress card">
                        <div class="certificate-image">
                            <img src="images/cert-5.jpg" alt="慢病管理证书">
                            <div class="progress-overlay">
                                <div class="progress-circle">
                                    <svg viewBox="0 0 36 36">
                                        <path class="circle-bg"
                                            d="M18 2.0845
                                            a 15.9155 15.9155 0 0 1 0 31.831
                                            a 15.9155 15.9155 0 0 1 0 -31.831"
                                        />
                                        <path class="circle"
                                            stroke-dasharray="45, 100"
                                            d="M18 2.0845
                                            a 15.9155 15.9155 0 0 1 0 31.831
                                            a 15.9155 15.9155 0 0 1 0 -31.831"
                                        />
                                        <text x="18" y="20.35" class="percentage">45%</text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="certificate-info">
                            <h3>慢病管理证书</h3>
                            <div class="certificate-progress">
                                <div class="progress-text">
                                    <span>完成进度</span>
                                    <span>45%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 45%;"></div>
                                </div>
                            </div>
                            <div class="certificate-meta">
                                <span class="cert-remain">剩余课程: 4门</span>
                                <span class="cert-exam">考试状态: 未开始</span>
                            </div>
                            <div class="certificate-actions">
                                <button class="btn btn-primary">继续学习</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 成就徽章 -->
                <div class="achievements-section">
                    <div class="section-title">
                        <h2>成就徽章</h2>
                        <a href="all-achievements.html" class="more">全部 ></a>
                    </div>
                    
                    <div class="achievements-grid card">
                        <div class="achievement-badge">
                            <div class="badge-image">
                                <img src="images/badge-1.png" alt="学习达人">
                            </div>
                            <div class="badge-name">学习达人</div>
                        </div>
                        <div class="achievement-badge">
                            <div class="badge-image">
                                <img src="images/badge-2.png" alt="技能精通">
                            </div>
                            <div class="badge-name">技能精通</div>
                        </div>
                        <div class="achievement-badge">
                            <div class="badge-image">
                                <img src="images/badge-3.png" alt="优秀护工">
                            </div>
                            <div class="badge-name">优秀护工</div>
                        </div>
                        <div class="achievement-badge locked">
                            <div class="badge-image">
                                <img src="images/badge-4.png" alt="金牌服务">
                                <div class="lock-overlay">
                                    <span class="icon icon-lock"></span>
                                </div>
                            </div>
                            <div class="badge-name">金牌服务</div>
                        </div>
                        <div class="achievement-badge locked">
                            <div class="badge-image">
                                <img src="images/badge-5.png" alt="全能护理师">
                                <div class="lock-overlay">
                                    <span class="icon icon-lock"></span>
                                </div>
                            </div>
                            <div class="badge-name">全能护理师</div>
                        </div>
                        <div class="achievement-badge locked">
                            <div class="badge-image">
                                <img src="images/badge-6.png" alt="专业导师">
                                <div class="lock-overlay">
                                    <span class="icon icon-lock"></span>
                                </div>
                            </div>
                            <div class="badge-name">专业导师</div>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐证书 -->
                <div class="recommended-certs card">
                    <div class="section-title">
                        <h2>推荐证书</h2>
                    </div>
                    
                    <div class="cert-recommendation">
                        <div class="cert-rec-image">
                            <img src="images/cert-rec-1.jpg" alt="专业护理师证书">
                        </div>
                        <div class="cert-rec-info">
                            <h3>专业护理师证书</h3>
                            <p>提升您的专业水平，获得更多工作机会</p>
                            <div class="cert-rec-meta">
                                <span class="cert-rec-courses">包含课程: 8门</span>
                                <span class="cert-rec-time">预计时间: 3个月</span>
                            </div>
                            <button class="btn btn-primary">了解详情</button>
                        </div>
                    </div>
                    
                    <div class="cert-recommendation">
                        <div class="cert-rec-image">
                            <img src="images/cert-rec-2.jpg" alt="母婴护理专项证书">
                        </div>
                        <div class="cert-rec-info">
                            <h3>母婴护理专项证书</h3>
                            <p>专注母婴护理领域，成为专业母婴护理师</p>
                            <div class="cert-rec-meta">
                                <span class="cert-rec-courses">包含课程: 6门</span>
                                <span class="cert-rec-time">预计时间: 2个月</span>
                            </div>
                            <button class="btn btn-primary">了解详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 添加新证书按钮 -->
                <div class="add-button" onclick="openAddModal()">
                    添加新证书
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
        
        <!-- 添加证书模态框 -->
        <div class="modal" id="addCertificateModal">
            <div class="modal-content">
                <div class="modal-title">添加新证书</div>
                <div class="close-button" onclick="closeModal('addCertificateModal')">✕</div>
                
                <div class="form-group">
                    <label class="form-label required">证书类型</label>
                    <select class="form-input">
                        <option value="">请选择证书类型</option>
                        <option value="nursing">护理资格证书</option>
                        <option value="health">健康证书</option>
                        <option value="emergency">急救技能证书</option>
                        <option value="special">专科护理证书</option>
                        <option value="training">培训证书</option>
                        <option value="other">其他专业证书</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">证书名称</label>
                    <input type="text" class="form-input" placeholder="请输入证书名称">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">证书编号</label>
                    <input type="text" class="form-input" placeholder="请输入证书编号">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">发证日期</label>
                    <input type="date" class="form-input">
                </div>
                
                <div class="form-group">
                    <label class="form-label">有效期至</label>
                    <input type="date" class="form-input">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">发证机构</label>
                    <input type="text" class="form-input" placeholder="请输入发证机构名称">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">证书照片</label>
                    <div class="upload-container" onclick="document.getElementById('certificatePhoto').click()">
                        <input type="file" id="certificatePhoto" style="display: none;" accept="image/*">
                        <div class="upload-icon">📷</div>
                        <div class="upload-text">点击上传</div>
                        <div class="upload-tip">支持JPG、PNG格式，大小不超过5MB</div>
                    </div>
                </div>
                
                <div class="message-box">
                    请务必上传真实有效的证书，虚假证书将导致账号封禁。证书上传后将进行人工审核，预计1-3个工作日内完成。
                </div>
                
                <div class="modal-footer">
                    <button class="action-button" onclick="closeModal('addCertificateModal')">取消</button>
                    <button class="action-button primary" onclick="submitNewCertificate()">提交</button>
                </div>
            </div>
        </div>
        
        <!-- 更新证书模态框 -->
        <div class="modal" id="updateCertificateModal">
            <div class="modal-content">
                <div class="modal-title">更新证书</div>
                <div class="close-button" onclick="closeModal('updateCertificateModal')">✕</div>
                
                <div class="form-group">
                    <label class="form-label">证书编号</label>
                    <input type="text" class="form-input" id="updateCertNo" readonly>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">新发证日期</label>
                    <input type="date" class="form-input">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">新有效期至</label>
                    <input type="date" class="form-input">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">更新证书照片</label>
                    <div class="upload-container" onclick="document.getElementById('updateCertificatePhoto').click()">
                        <input type="file" id="updateCertificatePhoto" style="display: none;" accept="image/*">
                        <div class="upload-icon">📷</div>
                        <div class="upload-text">点击上传</div>
                        <div class="upload-tip">支持JPG、PNG格式，大小不超过5MB</div>
                    </div>
                </div>
                
                <div class="message-box">
                    证书更新后将重新进行审核，请保证上传的是最新有效证书。审核期间不会影响原有证书的使用。
                </div>
                
                <div class="modal-footer">
                    <button class="action-button" onclick="closeModal('updateCertificateModal')">取消</button>
                    <button class="action-button primary" onclick="submitUpdatedCertificate()">提交更新</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
        });
        
        // 打开添加证书模态框
        function openAddModal() {
            document.getElementById('addCertificateModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
        
        // 打开更新证书模态框
        function openUpdateModal(type) {
            const modal = document.getElementById('updateCertificateModal');
            const certInput = document.getElementById('updateCertNo');
            
            if (type === 'nursing') {
                certInput.value = 'SH2023051688';
                document.querySelector('#updateCertificateModal .modal-title').textContent = '更新护理资格证书';
            } else if (type === 'health') {
                certInput.value = 'HEALTH202245672';
                document.querySelector('#updateCertificateModal .modal-title').textContent = '更新健康证书';
            }
            
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复背景滚动
        }
        
        // 查看证书详情
        function previewCertificate(type) {
            showToast('查看证书详情功能开发中...');
        }
        
        // 提交新证书
        function submitNewCertificate() {
            const formInputs = document.querySelectorAll('#addCertificateModal .form-input');
            let isValid = true;
            
            // 简单表单验证
            formInputs.forEach(input => {
                if (input.parentElement.querySelector('.required') && !input.value) {
                    isValid = false;
                }
            });
            
            if (!isValid) {
                showToast('请填写所有必填项');
                return;
            }
            
            // 模拟表单提交
            showToast('正在提交证书信息...');
            setTimeout(() => {
                closeModal('addCertificateModal');
                showToast('证书提交成功，等待审核');
                setTimeout(() => {
                    location.reload(); // 刷新页面
                }, 1500);
            }, 1500);
        }
        
        // 提交更新的证书
        function submitUpdatedCertificate() {
            const formInputs = document.querySelectorAll('#updateCertificateModal .form-input');
            let isValid = true;
            
            // 简单表单验证
            formInputs.forEach(input => {
                if (input.parentElement.querySelector('.required') && !input.value) {
                    isValid = false;
                }
            });
            
            if (!isValid) {
                showToast('请填写所有必填项');
                return;
            }
            
            // 判断是否上传了新照片
            const photoInput = document.getElementById('updateCertificatePhoto');
            if (!photoInput.files || !photoInput.files[0]) {
                showToast('请上传更新后的证书照片');
                return;
            }
            
            // 模拟表单提交
            showToast('正在提交更新信息...');
            setTimeout(() => {
                closeModal('updateCertificateModal');
                showToast('证书更新成功，等待审核');
                setTimeout(() => {
                    location.reload(); // 刷新页面
                }, 1500);
            }, 1500);
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 